<template>
  <div id="registerTestView">
    <a-card class="testList">
      <div class="header">
        <h2>比赛列表</h2>
      </div>
      <a-divider />
      <a-form :model="examination" layout="vertical">
        <a-form-item label="比赛/考试名称">
          <a-input v-model="examination.courseName" />
        </a-form-item>
        <a-form-item label="发布老师">
          <a-input v-model="examination.title" />
        </a-form-item>
        <a-form-item label="批注">
          <a-textarea v-model="examination.description" />
        </a-form-item>
        <a-form-item label="起始时间">
          <a-date-picker v-model="examination.dueDate" />
        </a-form-item>
        <a-form-item label="考试时长(小时)">
          <a-input-number
            min="{0}"
            max="{100}"
            v-model="examination.scoreWeight"
          />
        </a-form-item>
        <a-form-item>
          <a-checkbox v-model="examination.isPublic" @change="toggleEncryption">
            是否公开
          </a-checkbox>
          <span
            v-if="examination.password"
            style="margin-left: 16px; color: #065acc"
            >*非公开，存在密码</span
          >
        </a-form-item>
      </a-form>
      <div class="footer">
        <a-button
          type="primary"
          @click="handleSubmit"
          :style="{ background: '#065ACC' }"
          >下一步</a-button
        >
      </div>
    </a-card>
    <a-modal
      title="创建比赛密码"
      :visible="showPasswordModal"
      :closable="false"
    >
      <a-input-password v-model="examination.password" />
      <div class="button">
        <a-button
          type="primary"
          @click="confirmPassword"
          style="margin-right: 8px"
          >确认</a-button
        >
        <a-button @click="cancelPassword" style="margin-left: 8px"
          >取消</a-button
        >
      </div>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import axios from "axios";
import { useRouter } from "vue-router";
import { Message } from "@arco-design/web-vue";

const router = useRouter();

const examination = reactive({
  courseName: "",
  title: "",
  description: "",
  dueDate: "",
  scoreWeight: 0,
  isPublic: true,
  password: "",
});

const showPasswordModal = ref(false);

function toggleEncryption() {
  if (!examination.isPublic) {
    showPasswordModal.value = true;
  } else {
    examination.password = "";
  }
}

function confirmPassword() {
  if (examination.password) {
    showPasswordModal.value = false;
  } else {
    Message.error("请输入密码");
  }
}

function cancelPassword() {
  examination.isPublic = true;
  showPasswordModal.value = false;
  examination.password = "";
}

async function handleSubmit() {
  if (!examination.isPublic && !examination.password) {
    Message.error("请设置密码");
    return;
  }

  try {
    await axios.post(
      "http://localhost:8121/api/examination/create",
      examination,
    );
    Message.success("创建成功");
    await router.push("/manage/test/selection");
  } catch (error) {
    console.error("创建失败:", error);
    Message.error("创建失败");
  }
}
</script>

<style scoped>
.testList {
  width: 600px;
  margin: 0 auto;
}
.footer {
  display: flex;
  justify-content: center;
}
.button {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
</style>
